<!DOCTYPE html>
<head>
  <title>highlight.js test</title>
  <meta charset="utf-8">

  <link rel="alternate stylesheet" title="Zenburn" href="styles/zenburn.css">
  <link rel="alternate stylesheet" title="Pojoaque" href="styles/pojoaque.css">
  <link rel="alternate stylesheet" title="MonoBlue" href="styles/mono-blue.css">

  <style>
    #switch {
      overflow: auto; width: 67em;
      list-style: none;
      padding: 0; margin: 0;
    }
    #switch li {
      float: left; width: 12em;
      padding: 0.1em; margin: 0.1em 1em 0.1em 0;
      background: #EEE;
      cursor: pointer;
    }
    #switch li.current {
      background: #CCC;
    }
    .test {
      color: #888;
      font-weight: normal;
      margin: 2em 0 0 0;
    }
    .test var {
      font-style: normal;
    }
    .passed {
      color: green;
    }
    .failed {
      color: red;
    }
    .code {
      font: medium monospace;
    }
    .code .keyword {
      font-weight: bold;
    }
  </style>

  <script src="highlight.js"></script>
  <script>
  hljs.tabReplace = '    ';
  hljs.initHighlightingOnLoad();
  </script>

  <script>
  // Stylesheet switcher © Vladimir Epifanov <voldmar@voldmar.ru>
  (function(container_id) {
      if (window.addEventListener) {
          var attach = function(el, ev, handler) {
              el.addEventListener(ev, handler, false);
          }
      } else if (window.attachEvent) {
          var attach = function(el, ev, handler) {
              el.attachEvent('on' + ev, handler);
          }
      } else {
          var attach = function(el, ev, handler) {
              ev['on' + ev] = handler;
          }
      }


      attach(window, 'load', function() {
          var current = null;

          var info = {};
          var links = document.getElementsByTagName('link');
          var ul = document.createElement('ul')

          for (var i = 0; (link = links[i]); i++) {
              if (link.getAttribute('rel').indexOf('style') != -1
                  && link.title) {

                  var title = link.title;

                  info[title] = {
                  'link': link,
                  'li': document.createElement('li')
                  }

                  ul.appendChild(info[title].li)
                  info[title].li.title = title;

                  info[title].link.disabled = true;

                  info[title].li.appendChild(document.createTextNode(title));
                  attach(info[title].li, 'click', (function (el) {
                      return function() {
                          current.li.className = '';
                          current.link.disabled = true;
                          current = el;
                          current.li.className = 'current';
                          current.link.disabled = false;
                      }})(info[title]));
              }
          }

          current = info['MonoBlue']
          current.li.className = 'current';
          current.link.disabled = false;

          ul.id = 'switch';
          container = document.getElementById(container_id);
          container.appendChild(ul);
      });

  })('styleswitcher');
  </script>
<body>

<div id="styleswitcher">
  <h2>Styles</h2>
</div>

<table id="autotest">

  <tr>
    <th>PHP
    <td class="php">
<pre><code>require_once 'Zend/Uri/Http.php';

abstract class URI extends BaseURI
{

  /**
   * Returns a URI
   *
   * @return  URI
   */
  static public function _factory($stats = array(), $uri = 'http')
  {
      $uri = explode(':', $uri, 0b10);
      $schemeSpecific = isset($uri[1]) ? $uri[1] : '';
      $desc = 'Multi
line description';

      // Security check
      if (!ctype_alnum($scheme)) {
          throw new Zend_Uri_Exception('Illegal scheme');
      }

      return [
        'uri' => $uri,
        'value' => null,
      ];
  }
}

__halt_compiler () ; datahere
datahere
datahere */
datahere</code></pre>

  <tr>
    <th>CSS
    <td class="css">
<pre><code>@media screen and (-webkit-min-device-pixel-ratio: 0) {
  body:first-of-type pre::after {
    content: 'highlight: ' attr(class);
  }
  body {
    background: linear-gradient(45deg, blue, red);
  }
}

@import url('print.css');
@page:right {
 margin: 1cm 2cm 1.3cm 4cm;
}

@font-face {
  font-family: Chunkfive; src: url('Chunkfive.otf');
}

div.text,
#content,
li[lang=ru] {
  font: Tahoma, Chunkfive, sans-serif;
  background: url('hatch.png') /* wtf? */;  color: #F0F0F0 !important;
  width: 100%;
}
</code></pre>

  <tr>
    <th>JavaScript
    <td class="javascript">
<pre><code>function $initHighlight(block, flags) {
  try {
    if (block.className.search(/\bno\-highlight\b/) != -1)
      return processBlock(block, true, 0x0F) + ' class=""';
  } catch (e) {
    /* handle exception */

    var e4x =
        &lt;div&gt;Example
            &lt;p&gt;1234&lt;/p&gt;&lt;/div&gt;;
  }
  for (var i = 0 / 2; i &lt; classes.length; i++) { // "0 / 2" should not be parsed as regexp
    if (checkCondition(classes[i]) === undefined)
      return /\d+[\s/]/g;
  }
}</code></pre>

</table>
